import React, { Component } from 'react';
import { BaseApp , Foot } from './BaseApp';
import $ from 'jquery';
import Util from '../lib/commonJs';
import Pop from './Pop';

class SearchBody extends BaseApp {
    constructor(props){
        super(props);
    }
    _search = ()=>{
        let $box = $(".search-button-box");
        let $input = $('#txId');

        let txId = $input.val();
        if(Util.isEmpty(txId) || $input.attr("disabled")==="disabled"){
            return false;
        }

        $box.addClass("loading");
        $box.find("button").attr("disabled","disabled");
        $input.attr("disabled","disabled");

        let pop = Pop.dialog({
            showOk:!Util.isMobile(),
            hide:true,
            title:"证书查询",
            okText:"下载",
            cancelText:"关闭",
            width:"auto",
            maxWidth:"800px",
            overflow:"auto",
            content: <img className="cert-img" src={"/certs/getCert?txHex="+encodeURIComponent(txId)} alt="暂无相关信息" onLoad={()=>{
                pop.show();
                $box.removeClass("loading");
                $box.find("button").removeAttr("disabled");
                $input.removeAttr("disabled");
            }} onError={()=>{
                $box.removeClass("loading");
                $box.find("button").removeAttr("disabled");
                $input.removeAttr("disabled");
                Pop.alert("无此数据");
                pop.remove();
            }}/>
        },()=>{
            let url = $(".cert-img").attr("src");

            let aLink = document.createElement('a');
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
            aLink.download = "证书.png";
            aLink.href = url;
            aLink.dispatchEvent(evt);
            aLink.click();

        });
    };
    _downLoad = (fileName, content)=>{
        function base64Img2Blob(code){
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        }
        function downloadFile(fileName, content){
            let aLink = document.createElement('a');
            let blob = base64Img2Blob(content); //new Blob([content]);
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(evt);
            aLink.click();
        }
        return downloadFile(fileName, content)
    };

    _autoSearch = (e)=>{
        if(e.keyCode === 13){
            this._search();
            $("#txId").blur()
        }
    };

    render() {
        return (
            <div className="app-search-box">
                <div className="search-head"><i className="fa fa-graduation-cap"/>链谷人才信息查询</div>
                <div className="search-body">
                    <table className="search-table">
                        <tbody>
                        <tr>
                            <td>标识码</td>
                            <td><input id="txId" type="text"/></td>
                        </tr>
                        <tr>
                            <td/>
                            <td className="search-button-box">
                                <button className="search-btn" onClick={this._search}>
                                    <i className="fa fa-spinner search-button-loading" />
                                    <span className="search-button-text">查询</span>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    {/*<div className="search-input-box">
                        <input id="txId" type="text" onKeyUp={this._autoSearch} placeholder="请输入标识码"/>
                    </div>
                    <div className="search-button-box">
                        <button className="btn btn-primary" onClick={this._search}>
                            <i className="fa fa-spinner search-button-loading" />
                            <span className="search-button-text">查询学员信息</span>
                        </button>
                    </div>*/}
                </div>
                <div className="search-body-shadow"/>
            </div>
        );
    }
}

class App extends BaseApp {
    constructor(props){
	super(props);
	if(Util.isMobile()){
	    $("body").on("touchmove",function(event){
		event.preventDefault();
	    }, false)
	}
    }

    render() {
	return [
            <div className={"app-body"} key={this.GID()}>
                <SearchBody />
                <div className="bg-item-01"/>
                <div className="bg-item-02"/>
                <div className="bg-item-03"/>
            </div>,
            <Foot key={this.GID()}/>
	];
    }
}
export default App;
// export default SearchBody;
